<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>home</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <link href="../css/global.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        @media (min-width: 768px) {
            #slider_sub{
                width: 250px;
                height: 900px;
                position: absolute;
                z-index: 1;
            }

            .page_main{
                margin-left: 255px;
            }
        }

        .dark-bg{
            background-color: #2e2e2e;
            border-top: 2px solid #2994bf;

            position: absolute;
            left: 0;
            bottom: 0;

            width: 100%;
        }
        .footer{
            height: 30px;
        }
        .footer .text-left{
            color: #fff;
            line-height: 30px;
        }
        .footer .text-right{
            line-height: 30px;
        }
        .footer .text-right a{
            color: #fff;
            padding-left: 10px;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-inverse navbar-static-top">

        <!--        顶部导航栏-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" aria-expanded="false" data-target="#slider_sub">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                管理后台
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right" style="margin-right: 20px">
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span><span style="padding-left:5px;color: #c82829">29</span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-off"></span><span style="padding-left:5px">注销</span></a></li>
            </ul>
        </div>

        <!--        左侧菜单导航-->
        <div class="navbar-inverse navbar-collapse" id="slider_sub" >
            <ul class="nav">

                <li>
                    <a href="#sub1" data-toggle="collapse">系统管理<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
                    <ul id="sub1" class="nav collapse">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;用户管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;角色管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;资源管理</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#sub2" data-toggle="collapse">系统管理<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
                    <ul id="sub2" class="nav collapse">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;用户管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;角色管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;资源管理</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#sub3" data-toggle="collapse">系统管理<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
                    <ul id="sub3" class="nav collapse">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;用户管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;角色管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;资源管理</a></li>
                    </ul>
                </li>


            </ul>
        </div>

    </nav>




    <!--    主内容-->
    <div class="page_main">

        <!--面包屑导航区-->
        <ol class="breadcrumb">
            <li><a href="#">系统管理</a></li>
            <li><a href="#">用户管理</a></li>
            <li class="active">用户列表</li>
        </ol>

        <!--面版 卡片视图区-->
        <div class="panel panel-default view-card">

            <div class="panel-heading">

                <!--搜索框-->
                <div class="row">
                    <div class="col-lg-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="sizing-addon1">用户名:</span>
                            <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="sizing-addon2">用户名:</span>
                            <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
                        </div>
                    </div>

                    <div class="btn btn-default pull-right">搜索</div>
                </div>
            </div>

            <div class="panel-body">


                <!-- 表格数据-->
                <table class="table table-striped table-bordered table-hover table-responsive table-globel">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>姓名</th>
                            <th>姓名</th>
                            <th>姓名</th>
                            <th>姓名</th>
                            <th>姓名</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                        </tr>
                        <tr>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                        </tr>
                        <tr>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                        </tr>
                        <tr>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                        </tr>
                        <tr>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                            <td>吴晓龙</td>
                        </tr>
                    </tbody>
                </table>


                <nav aria-label="Page navigation page-globel">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>


    <!--        最底部-->
    <div class="container-fluid dark-bg">

            <div class=" footer">
                <div class="col-lg-6 col-md-6 col-sm-6 text-left">@.2020 wuxiaolong.All Rights Reserved.</div>
                <div class="col-lg-6 col-md-6 col-sm-6 text-right">
                    <a href="#">Home</a>
                    <a href="#">About Us</a>
                    <a href="#">Fap</a>
                    <a href="#">Contact Us</a>
                </div>
            </div>

    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-3.1.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>
